/** setycyas自制的网页模拟框通用类,构造函数自动加入模拟框div到网页.
 * 考虑到兼容性,不使用jQuery.默认是隐藏的,需要用showModal()函数显示控制台
 *
 * 各项私有属性(id与属性名相同,方便自己查找):
 * _z:模拟控制台层的z-index
 * _modalDiv:原生的div对象,表示整个模拟框div
 * _modalMaskDiv:模拟框的遮罩层,采用90%透明度进行遮罩
 * _modalContentDiv:模拟框的内容
 * _modalText:原生的textarea,模拟框的主要输出输入文本框
 * _cmdButton:命令按钮,命令内容需要自己定义
 * _closeButton:关闭按钮,隐藏模拟控制台.打开模拟控制台只能用代码
 *
 * 各项公有属性函数:
 * SetycyasModal(z):构造函数,指定模拟框的z-index
 * setCmd(f):f是一个函数,定义按下_cmdButton时的函数
 * readModal():返回控制台的文本
 * showMessage(msg):在控制台显示文本msg
 * showModal():显示控制台
 * hideModal():隐藏控制台
 *
 * 2019-05-14完成 
 * version = 1.00
 * 1.00版本,表示基本完成可用,css的设定也算可以了,视觉效果OK
 */
class SetycyasModal {
  
  constructor(z) {
    //初始变量
    this._z = z;
    this._modalDiv = document.createElement('div');
    this._modalMaskDiv = document.createElement('div');
    this._modalContentDiv = document.createElement('div');
    this._modalText = document.createElement('textarea');
    this._cmdButton = document.createElement('button');
    this._closeButton = document.createElement('button');

    //加入组件
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(this._modalDiv);
    this._modalDiv.appendChild(this._modalMaskDiv);
    this._modalDiv.appendChild(this._modalContentDiv);
    this._modalContentDiv.appendChild(this._modalText);
    this._modalContentDiv.appendChild(document.createElement('br'));
    this._modalContentDiv.appendChild(this._cmdButton);
    this._modalContentDiv.appendChild(this._closeButton);
    
    // 设定各种css
    // _modalDiv
    this._modalDiv.id = 'modal';
    this._modalDiv.style['z-index'] = this._z+'';
    this._modalDiv.style.display = 'none';
    this._modalDiv.style.position = 'fixed';
    this._modalDiv.style.top = '0px';
    this._modalDiv.style.left = '0px';
    this._modalDiv.style.width = '100%';
    this._modalDiv.style.height = '100%';
    // _modalMaskDiv   
    this._modalMaskDiv.id = 'modal-mask';
    this._modalMaskDiv.style.top = '0px';
    this._modalMaskDiv.style.left = '0px';
    this._modalMaskDiv.style.width = '100%';
    this._modalMaskDiv.style.height = '100%';
    this._modalMaskDiv.style['background-color'] = '#e8e8e8';
    this._modalMaskDiv.style.opacity = '0.9';
    // _modalContentDiv
    this._modalContentDiv.id = 'modal-content';
    this._modalContentDiv.style.position = 'fixed';
    this._modalContentDiv.style.top = '50px';
    this._modalContentDiv.style.left = '50px';
    this._modalContentDiv.style.width = '80%';
    this._modalContentDiv.style.padding = '50px';
    this._modalContentDiv.style['background-color'] = '#cccccc';
    this._modalContentDiv.style['border-radius'] = '15px';
    // _consoleText
    this._modalText.id = 'modal-text';
    this._modalText.style.width = '80%';
    this._modalText.style['margin-bottom'] = '10px';
    this._modalText.style['border-radius'] = '5px';
    this._modalText.value = 'This is modal-text,use value or $.val() to get it.';
    // _cmdButton
    this._cmdButton.id = "cmd-btn";
    this._cmdButton.textContent = 'CMD';
    this._cmdButton.style.padding = '5px';
    // _closeButton
    this._closeButton.id = "close-button";
    this._closeButton.textContent = 'Close';
    this._closeButton.style.padding = '5px';
    //设定事件
    this._cmdButton.onclick = ()=>{
      console.log('Default _cmdButton onclick!Now message is:');
      console.log(this.readModal());
    }
    this._closeButton.onclick = ()=>{
      this._modalDiv.style.display = 'none';
    }
  }
  
  /* 设置命令 */
  setCmd(f){
    this._cmdButton.onclick = f;
  }
  
  /* 读取字符串 */
  readModal(){
    return this._modalText.value;
  }
  
  /* 显示文本msg */
 showMessage(msg){
   this._modalText.value = msg;
 }
 
 /* 显示 */
 showModal(){
   this._modalDiv.style.display = 'block';
 }

 /* 隐藏 */
 hideModal(){
   this._modalDiv.style.display = 'none';
 }
 
}

/* 下面两句是测试用的,使用时不需要 */
var sm = new SetycyasModal(100);
sm.showModal();